<template>
  <view class="article">
    <view class="article-head"></view>
    <view class="article-title">{{ article.title }}</view>
    <view class="article-meta">
      <text class="article-author">来源：{{ article.inputer || "网络" }}</text>
      <text class="article-text">发表于</text>
      <text class="article-time">{{ article.addtime }}</text>
    </view>
    <view class="article-play" v-if="url && article.playname">
      <video
        v-if="/mp4|360|qqq/.test(type)"
        class="video"
        :src="url"
        objectFit="fill"
        controls
        :autoplay="false"
      />
      <u-link v-else-if="url" :href="url" text="点击播放"></u-link>
    </view>
    <view class="article-content" v-if="article.content">
      <u-parse
        :content="article.content"
        @preview="preview"
        @navigate="navigate"
      />
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import uParse from "@/components/u-parse/u-parse.vue";
import playing from "@/utils/play";
export default {
  data() {
    return {
      url: "",
      type: "",
      article: {},
    };
  },
  components: {
    uParse,
  },
  methods: {
    ...mapActions(["getNewsContent", "getPlayUrl"]),
    getListData() {
      const id = this.$mp.query.id;
      this.getNewsContent({
        id,
      }).then((res) => {
        console.log(res);
        const { playname, playurl, title } = res.data;
        this.article = res.data;
        uni.setNavigationBarTitle({
          title,
        });
        if (playname) {
          const { url, type } = playing(playname, playurl);
          this.getPlayUrl({
            type,
            url,
          }).then((res) => {
            this.url = res.data;
            this.type = type;
          });
        }
      });
    },
    preview(src, e) {
      console.log(src, e, "preview");
    },
    navigate(href, e) {
      console.log(href, e, "navigate");
    },
    videoErrorCallback: function (e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false,
      });
    },
  },
  mounted() {
    this.getListData();
  },
};
</script>
<style lang="scss" scoped>
.article {
  display: flex;
  flex-direction: column;
  height: 100%;

  &-head {
    height: calc(80rpx + var(--status-bar-height));
  }

  &-title {
    padding: 20rpx;
    font-size: 32rpx;
    line-height: 1.5;
  }

  &-play {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 422rpx;
    background: #000;
    color: #fff;

    .video {
      width: 100%;
      height: 100%;
    }
  }

  &-meta {
    margin: 0 20rpx 20rpx;
    height: 40rpx;
    line-height: 40rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: gray;
  }

  &-text {
    font-size: 26rpx;
    margin: 0 20rpx;
  }

  &-author,
  &-time {
    font-size: 30rpx;
  }

  &-content {
    padding: 0 30rpx;
    overflow: hidden;
    font-size: 30rpx;
    margin-bottom: 30rpx;
  }
}

.scroll {
  flex: 1;
  position: relative;
  background-color: #fff;
  height: calc(100vh - 422rpx);

  &.s100 {
    height: 100vh;
  }
}

.scroll-content {
  display: flex;
  flex-direction: column;
}
</style>
